<template>
  <div>
    <!-- 供应商查询  -->
    <el-form :inline="true" size="small" ref="supplierSeach" :model="supplierSeach" class="demo-form-inline">
         <el-form-item prop="id">
            <el-input v-model.trim="supplierSeach.id" placeholder="id"></el-input>
        </el-form-item>
        <el-form-item prop="name">
            <el-input v-model.trim="supplierSeach.name" placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item prop="linkman">
            <el-input v-model.trim="supplierSeach.linkman" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
            <el-input v-model.trim="supplierSeach.mobile" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="supplierSearch">查询</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="openAddDialog()">新增</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 供应商列表   -->
    <el-table  :data="supplierList" height="380" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="name" label="供应商名称" > </el-table-column>
      <el-table-column prop="linkman" label="联系人" width="120"> </el-table-column>
      <el-table-column prop="mobile" label="联系电话" > </el-table-column>
      <el-table-column prop="remark" label="备注" > </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEditDialog(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteSupplier(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 供应商列表分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 表单弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="supplierForm" ref="dialogForm" :rules="rules" label-width="100px" style="width:400px;">
            <el-form-item label="供应商名称" prop="name">
                <el-input v-model.trim="supplierForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkman">
                <el-input v-model.trim="supplierForm.linkman" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
                <el-input v-model.trim="supplierForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model.trim="supplierForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import supplierApi from "../../api/supplier";
export default {
  name: "",
  data() {
    return {
      loading : true,
      dialogTitle: "",
      dialogFormVisible : false,
      supplierForm : {
        name : "",
        linkman : "",
        mobile : "",
        remark : ""
      },
      page: 1,
      size: 10,
      supplierSeach: {
        id: "",
        name: "",
        linkman: "",
        mobile: "",
      },
      supplierList: [],
      total : 0,
      rules : {
        name : [
          {required : true, message : "供应商名称不能为空", trigger: "blur"}
        ],
        linkman : [
          {required : true, message : "联系人不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    //初始化列表方法
    async init() {
      try {
        let res = await supplierApi.getSupplierList(
          this.page,
          this.size,
          this.supplierSeach
        );
        this.supplierList = res.data.data.rows;
        this.total = res.data.data.total
      } catch (e) {
        console.log(e);
        this.$message("请求发生错误");
      }
    },
    //条数发生变化触发的方法
    handleSizeChange(val){
        this.size = val
        this.init()
    },
    //页码发生变化触发的方法
    handleCurrentChange(val){
        this.page = val;
        this.init()
    },
    //表单重置方法
    resetForm(){
        this.$refs["supplierSeach"].resetFields();
        this.init()
    },
    //供应商查询方法
    supplierSearch(){
        this.init()
    },
    //删除供应商方法
    deleteSupplier(id){
        this.$confirm('确认删除这条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            try{
                let res = await supplierApi.deleteSupplier(id);
                if(res.data.flag){
                    this.$message({type: 'success',message: '删除成功'});
                    //列表重新渲染
                    this.init()
                }else{
                    this.$message({type: 'success',message: '删除失败'});
                }
            }catch(e){
                  this.$message({type: 'error',message: '请求发生错误!'});
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //打开新增弹窗
    openAddDialog(e){
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetDialogForm()
        })
        this.dialogTitle = "供应商新增"
        // console.log("新增=》:" + JSON.stringify(this.supplierForm))

    },
    //打开编辑弹窗
    openEditDialog(id){
        this.dialogTitle = "供应商编辑"
        this.dialogFormVisible = true;
        this.resetDialogForm()
        this.handleFindSupplier(id)
    },
    //查询单条供应商数据
    async handleFindSupplier(id){
      let res = await supplierApi.findSupplier(id);
      // console.log(res)
      if(res.data.flag){
        // this.supplierForm = res.data.data.rows[0]
        Object.assign(this.supplierForm,res.data.data.rows[0])
        // console.log("编辑=》:"+ JSON.stringify(this.supplierForm))
      }
    },
    //重置弹窗表单方法
    resetDialogForm(){
      this.$refs["dialogForm"].resetFields();
    },
    //弹窗确定按钮方法
    submitForm(){
      this.$refs["dialogForm"].validate(valid=>{
        if(valid){
          if(this.supplierForm.id){
            //调用编辑方法
            this.handleEditSupplier()
          }else{
            //调用新增方法
            this.handleAddSupplier()
          }
          
        }
      })
    },
    //供应商新增
    async handleAddSupplier(){
      let res = await supplierApi.addSupplier(this.supplierForm);
      if(res.data.flag){
        this.$message("新增成功");
        this.dialogFormVisible = false;
        this.init();
      }
    },
    //供应商编辑方法
    async handleEditSupplier(){
      let res = await supplierApi.editSupplier(this.supplierForm.id, this.supplierForm);
      if(res.data.flag){
        this.$message("修改成功");
        this.dialogFormVisible = false;
        this.init()
      }
    }
  },
  components: {},
};
</script>

<style scoped>
.el-form{
    margin-top:20px;
}
</style>
